<template>
	<view class="container">
		<view class="cover" v-if="showPage">
			加载中...
		</view>
		<!-- 搜索模块 -->
		<view class="city-block">
			<view class="city-search ">
				<image class="search" src="../../static/search.png" mode="widthFix"></image>
				<input type="search-text" placeholder="请输入服务城市名称" @input="searchClick" />

			</view>
		</view>
		<!-- /搜索模块 -->

		<view v-if="show">
			<!-- 定位模块 -->
			<view class="location share">
				<p>定位城市</p>
				<view class="location-city" @click="chooseLocal">{{localCity.cityname}}</view>
			</view>
			<!-- /定位模块 -->

			<!-- 热门城市模块 -->
			<view class="hot share">
				<p>热门城市</p>
				<view class="hot-city">
					<view class="item" v-for="(item,index) in hotcity" :key="index" @click="chooseCity(item)">
						{{item.cityname}}
					</view>
				</view>
			</view>
			<!-- /热门城市模块 -->

			<!-- 城市列表模块 -->
			<view class="city-list" v-for="(item,index) in letters" :key="index">
				<view class="city-letter">
					<text>{{item}}</text>
				</view>
				<view class="city-name share" @click="chooseCity(ite)" v-for="(ite, index) in cityLists"
					v-show="item == ite.letter" :key="index">
					{{ite.cityname}}
				</view>
			</view>
			<!-- /城市列表模块 -->
		</view>

		<!-- 搜索列表模块 -->
		<view v-else="!show">
			<view class="show-name" v-for="(item,index) in scList" @click="chooseCity(item)" :key="index">
				{{item.cityname}}
			</view>
		</view>
		<!-- /搜索列表模块 -->
	</view>
</template>

<script>
	var amapFile = require("../../utils/amap-wx.js")
	import requests from "../../utils/util.js"
	export default {
		data() {
			return {
				hotcity: [],
				cityLists: [],
				letters: "",
				show: true,
				localCity: {
					cityname: "",
					citycode: "wh"
				},
				inputVal: "",
				searchList: [],
				cityContent: "",
				showPage: false
			}
		},
		onLoad() {
			this.showPage = true
			// 请求城市列表数据
			requests("city.php", {
				action: "list"
			}).then((res) => {
				let letters= []
				res.data.forEach(val => {
					letters.push(val.letter)
				}) 
				this.letters = [...new Set(letters)];
				this.cityLists = res.data;

			})
			//获得定位城市数据
			var myAmapFun = new amapFile.AMapWX({
				key: "c5aa786ead1458a9ae992b5e31770579"
			});
			myAmapFun.getRegeo({
				success: (res) => {
					this.localCity.cityname = res[0].regeocodeData.addressComponent.city.substr(0, 2) //截取  '武汉' 市 
				}
			})

			// 请求热门城市数据
			requests("city.php", {
				action: "hot"
			}).then((res) => {
				this.hotcity = res.data;
			})

			setTimeout(() => {
				this.showPage = false;
			}, 500)


		},
		methods: {
			// 点击左箭头 返回首页
			backHome() {
				uni.navigateBack({
					delta: 1
				})
			},

			//点击搜索 显示搜索数据
			searchClick(e) {
				// 每次输入文字清空结果，避免搜索到不匹配城市
				this.searchList = [];
				this.inputVal = e.detail.value;

				// 匹配后台数据所有城市中是否含有输入框的字眼
				this.cityLists.forEach(el => {
					if (el.cityname.includes(this.inputVal) && this.inputVal !== '') {
						let searchli = this.searchList;
						if (!searchli.includes(el.cityname)) {
							searchli.push(el);
						}
						this.show = false;
						this.searchList = searchli;
					}
				});

				// 清空输入框显示初始数据
				if (this.inputVal === '') {
					this.show = true;
					this.searchList = [];searchList
				}
			},

			// 选择城市并且返回主页
			chooseCity(val) {
				this.cityContent = val;
				uni.setStorageSync("city", this.cityContent);
				uni.navigateTo({
					url: "../home/home"
				})
			},

			chooseLocal() {
				uni.setStorageSync("city", this.localCity);
				uni.navigateTo({
					url: "../home/home"
				})
			}
		}
	}
</script>

<style>
	[v-clock] {
		display: none;
	}

	.cover {
		position: absolute;
		z-index: 500;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 100%;
		background-color: #FFFFFF;
		text-align: center;
		color: #FF6600;
		font-size: 40rpx;
		padding-top: 600rpx;
	}

	/* 整体容器 */
	.container {
		position: relative;
		font-family: PingFang SC-Medium;
	}

	/* 复用的类 */
	.share {
		margin: 10rpx 40rpx;
	}

	.arrow-lf {
		padding-right: 20rpx;
	}

	/* 顶部 */
	.top {
		display: flex;
		justify-content: space-between;
		margin: 10rpx 40rpx 34rpx 40rpx;
		font-size: 36rpx;
	}

	.top image {
		margin-top: 5rpx;
		width: 22.39rpx;
		vertical-align: middle;
	}

	.top text {
		margin-right: 262rpx;
	}

	.city-block {
		position: sticky;
		z-index: 100;
		top: 0;
		left: 0;
		padding: 10rpx 40rpx 10rpx 40rpx;
		background-color: white;
	}

	.city-search {
		display: flex;
		justify-content: space-between;
		padding: 12rpx 27rpx 12rpx 20rpx;
		border-radius: 32rpx;
		background-color: #f5f5f5;
		font-size: 28rpx;
		font-weight: 500;
	}

	.city-search input {
		flex: 5;
	}

	.search {
		width: 32.3rpx;
		height: 33.26rpx;
		margin: 5rpx 10rpx 0 0;
	}

	.location {
		margin-top: 30rpx;
		font-size: 32rpx;
	}

	.location-city {
		margin: 30rpx 536rpx 0 0;
		padding: 12rpx 0;
		border-radius: 31rpx;
		background-color: #ff6600;
		text-align: center;
		color: #fff;
		font-size: 28rpx;
	}

	.hot {
		margin-top: 30rpx;
	}

	.hot-city {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin-top: 12rpx;
	}

	.hot .item {
		margin: 6px 17rpx;
		padding: 12rpx 36rpx;
		border-radius: 31rpx;
		font-size: 28rpx;
		background-color: #f8f8f8;
		text-align: center;
		color: #000;
	}

	.city-letter {
		background-color: #f7f7f7;
		text-indent: 40rpx;
		margin-bottom: 20rpx;
	}

	.city-name {
		padding: 20rpx 0;
		border-bottom: 2rpx solid #f0f0f0;
		font-size: 28rpx;
		margin-bottom: 0;
	}

	.show-name {
		position: relative;
		z-index: 1001;
		margin: 20rpx;
		border-bottom: 2rpx solid #f0f0f0;
		text-indent: 30rpx;
		padding-bottom: 20rpx;
	}
</style>
